<template>
	<view>
		<map id="map" @click="show = false" class="map" :show-location="true" :latitude="latitude"
			:longitude="longitude" style="width: 750rpx;height: 1440rpx;pointer-events: auto;"></map>
		<view class="container">
			<view v-for="(box, index) in boxes" :key="index" class="box" :style="box.style">
				旅游攻略
			</view>
		</view>
		<view class="plan">
			旅行计划生成中...
		</view>
	</view>
</template>

<script>
	import amapFile from '@/libs/amap-wx.130.js';
	export default {
		data() {
			return {
				boxes: [{
						x: 40,
						y: 0,
						opacity: 0.3
					},
					{
						x: 0,
						y: 10,
						opacity: 0.3
					},
					{
						x: -20,
						y: 0,
						opacity: 0.3
					},
					{
						x: -60,
						y: 40,
						opacity: 0.3
					},
				],
				latitude: 0,
				longitude: 0,
			};
		},
		onLoad() {
		    var that = this;
		    var myAmapFun = new amapFile.AMapWX({key:"ebf1b964f0d15eb85a23e0201c0e937e"});
		    uni.getSystemInfo({
		      success: function(data){
		        var height = data.windowHeight;
		        var width = data.windowWidth;
		        var size = width + "*" + height;
		        
		
		      }
		    })
		    
		  },
		onShow() {
			this.latitude = uni.getStorageSync("userLocation").split(",")[1]
			this.longitude = uni.getStorageSync("userLocation").split(",")[0]
			console.log("pppppoiu", uni.getStorageSync("userLocation").split(","))
			// 使用定时器逐个设置盒子的最终位置和透明度，触发过渡效果
			this.boxes.forEach((box, index) => {
				setTimeout(() => {
					this.$set(this.boxes[index], 'style', {
						transform: `translate(${box.x}px, ${box.y}px)`,
						opacity: 0.3,
						transition: 'all 0.8s ease-in-out',
					});
				}, index * 1000); // 逐个延时插入
			});
		},
		methods: {
		}
	};
</script>

<style>
	.img_box{
		width: 500rpx;
		height: 500rpx;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	}
	.img_box image{
	  width: 100%;
	  height: 100%;
	}
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80vh;
		position: absolute;
		top: 0;
		left: 0;
        pointer-events: none;
	}

	.box {
		width: 200rpx;
		height: 64rpx;
		color: #fff;
		pointer-events: auto;
		text-align: center;
		line-height: 64rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
		opacity: 0;
	}
	.plan{
		width: 640rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-color: rgba(0,0,0,0.7);
		position: absolute;
		top: 435rpx;
		left: 60rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		line-height: 120rpx;
		padding-left: 288rpx;
		box-sizing: border-box;

		
	}
	.plan::after{
		 content: url("/static/my/plan.png");
		 position: absolute;
		 top: -130rpx;
		 left: 20rpx;
	}
</style>